<!--样式模板-->
<template>
    <div class="login_container">

       <div class="login_box">
           <!-- 头像 -->
          <div class="avate_box">
              <img src="../assets/logo.png" alt="">
          </div>
          <!-- 表单 -->
          <el-form ref="form" :model="user" :rules="loginRules"  class="login-form" >
             <el-form-item  class="login-item"  prop="username" >
               <el-input class="login-input" v-model="user.username" prefix-icon="iconfont icon-user"  ></el-input>
            </el-form-item>
            <el-form-item class="login-item"  prop="password" >
               <el-input type="password" class="login-input" v-model="user.password"  prefix-icon="iconfont icon-3702mima"></el-input>
            </el-form-item>
             <el-form-item class="login-botton">
                 <el-button type="primary" @click="login">登录</el-button>
                   <el-button type="info" @click="resetLogin">重置</el-button>
            </el-form-item>
          </el-form>
       </div>
    </div>
</template>
<!--行为-->
<script>
export default {
  data () {
    return {
      // 绑定的数据对象
      user: {
        username: 'admin',
        password: '123456'
      },
      loginRules: {
        username: [
          {
            required: 'true',
            message: '用户名不能为空',
            trigger: 'blur'
          },
          {
            min: 3,
            max: 16,
            trigger: 'blur',
            message: '用户名必须是3-16位'
          }
        ],
        password: [
          {
            required: 'true',
            message: '密码不能为空',
            trigger: 'blur'
          },
          {
            min: 6,
            max: 16,
            trigger: 'blur',
            message: '密码必须是6-16位'
          }
        ]
      }
    }
  },
  methods: {
    // 重置方法
    resetLogin () {
      // 获取表单对象
      this.$refs.form.resetFields()
    },
    // 登录方法
    login () {
      this.$refs.form.validate().then(async () => {
        const { data: res } = await this.$http.post('login', this.user)
        if (res.meta.status === 200) {
          // 保存token
          window.sessionStorage.setItem('token', res.data.token)
          // 跳转页面
          this.$router.push('/home')
          return this.$message.success('登陆成功')
        } else {
          return this.$message.error('登录失败')
        }
      }).catch(() => {
        alert('验证失败')
      })
    }
  }

}
</script>
<!--样式 需要加scopted因为这样才是渲染这个组件的样式-->
<style    scoped>
   .login_container{
       background-color: #2b4b6b;
       height: 100%;
   }
   .login_box{
      height: 300px;
      width: 600px;
      border-radius: 3px;
      background-color: white;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
   }
   .avate_box{
       width: 130px;
       height: 130px;
       background-color:#fff;
       position: absolute;
       left: 50%;
       transform: translate(-50%,-50%);
       border-radius: 50%;
      padding: 10px;
   }
     img{
           width: 100%;
           height: 100%;
          border-radius: 50%;
          background-color: #eee;
       }
    .login-form{
        width: 100%;
        position: absolute;
        bottom: 0;
    }
    .login-item{
        padding:0 10px;
        width: 100%;
        box-sizing: border-box;
    }
    .login-input{
        width:100%;
    }
    .login-botton{
        display: flex;
        justify-content: flex-end;
         padding-right: 10px;
    }
</style>
